<!DOCTYPE html>
<html lang="zh-CN" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>科技感测试管理平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: {
                        'sans': ['Noto Sans SC', 'sans-serif']
                    },
                    colors: {
                        'tech-blue': '#00d4ff',
                        'tech-purple': '#8b5cf6',
                        'tech-green': '#10b981',
                        'neon-blue': '#00d4ff',
                        'neon-purple': '#a855f7',
                        'neon-green': '#34d399'
                    },
                    animation: {
                        'glow': 'glow 2s ease-in-out infinite alternate',
                        'fadeIn': 'fadeIn 0.5s ease-in-out',
                        'slideIn': 'slideIn 0.3s ease-out'
                    },
                    keyframes: {
                        glow: {
                            'from': { boxShadow: '0 0 5px #00d4ff, 0 0 10px #00d4ff, 0 0 15px #00d4ff' },
                            'to': { boxShadow: '0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 30px #00d4ff' }
                        },
                        fadeIn: {
                            'from': { opacity: '0', transform: 'translateY(10px)' },
                            'to': { opacity: '1', transform: 'translateY(0)' }
                        },
                        slideIn: {
                            'from': { transform: 'translateX(-20px)', opacity: '0' },
                            'to': { transform: 'translateX(0)', opacity: '1' }
                        }
                    }
                }
            }
        }
    </script>
    <style>
        /* 动态粒子背景 */
        .tech-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: radial-gradient(circle at 25% 25%, #1a1a2e 0%, #16213e 25%, #0f0f23 50%);
            overflow: hidden;
        }
        
        .tech-bg::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(1px 1px at 20px 30px, #00d4ff, transparent),
                radial-gradient(1px 1px at 40px 70px, #8b5cf6, transparent),
                radial-gradient(1px 1px at 90px 40px, #10b981, transparent),
                radial-gradient(1px 1px at 130px 80px, #00d4ff, transparent),
                radial-gradient(1px 1px at 160px 30px, #8b5cf6, transparent);
            background-repeat: repeat;
            background-size: 200px 200px;
            animation: float 20s infinite linear;
            opacity: 0.3;
        }

        @keyframes float {
            0% { transform: translate(0%, 0%) rotate(0deg); }
            25% { transform: translate(-50%, -50%) rotate(90deg); }
            50% { transform: translate(-100%, -100%) rotate(180deg); }
            75% { transform: translate(-50%, -50%) rotate(270deg); }
            100% { transform: translate(0%, 0%) rotate(360deg); }
        }

        /* 科技感渐变 */
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .tech-gradient {
            background: linear-gradient(135deg, #00d4ff 0%, #8b5cf6 50%, #10b981 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .cyber-gradient {
            background: linear-gradient(45deg, #ff006e, #00d4ff, #8b5cf6, #10b981);
            background-size: 400% 400%;
            animation: cyberpunk 4s ease infinite;
        }

        @keyframes cyberpunk {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        /* 玻璃态效果 */
        .glass-effect {
            background: rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }
        
        .dark .glass-effect {
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        /* 霓虹边框效果 */
        .neon-border {
            position: relative;
            border: 2px solid transparent;
            background: linear-gradient(45deg, #00d4ff, #8b5cf6, #10b981) border-box;
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: destination-out;
        }

        .neon-border::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: inherit;
            background: linear-gradient(45deg, #00d4ff, #8b5cf6, #10b981);
            z-index: -1;
            filter: blur(10px);
            opacity: 0.7;
            animation: neon-pulse 2s ease-in-out infinite alternate;
        }

        @keyframes neon-pulse {
            from { opacity: 0.7; filter: blur(10px); }
            to { opacity: 1; filter: blur(15px); }
        }

        /* 悬浮发光效果 */
        .hover-glow {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .hover-glow::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        .hover-glow:hover::before {
            left: 100%;
        }

        .hover-glow:hover {
            box-shadow: 
                0 0 20px rgba(0, 212, 255, 0.5),
                0 0 40px rgba(139, 92, 246, 0.3),
                0 0 60px rgba(16, 185, 129, 0.2);
            transform: translateY(-3px) scale(1.02);
        }

        /* 数据流动效果 */
        .data-stream {
            position: relative;
            overflow: hidden;
        }

        .data-stream::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: repeating-linear-gradient(
                90deg,
                transparent,
                transparent 98px,
                rgba(0, 212, 255, 0.1) 100px
            );
            animation: data-flow 3s linear infinite;
        }

        @keyframes data-flow {
            0% { transform: translateX(-100px); }
            100% { transform: translateX(100px); }
        }

        /* 进度条科技效果 */
        .tech-progress {
            background: linear-gradient(90deg, #00d4ff, #8b5cf6, #10b981);
            border-radius: 10px;
            position: relative;
            overflow: hidden;
        }

        .tech-progress::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-image: linear-gradient(
                -45deg,
                rgba(255, 255, 255, 0.2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, 0.2) 50%,
                rgba(255, 255, 255, 0.2) 75%,
                transparent 75%,
                transparent
            );
            background-size: 30px 30px;
            animation: tech-move 1s linear infinite;
        }

        @keyframes tech-move {
            0% { background-position: 0 0; }
            100% { background-position: 30px 0; }
        }

        /* 状态指示器 */
        .status-indicator {
            position: relative;
            display: inline-block;
        }

        .status-indicator::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            animation: radar 2s linear infinite;
        }

        .status-indicator.online::before {
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
        }

        .status-indicator.offline::before {
            box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
        }

        .status-indicator.busy::before {
            box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7);
        }

        @keyframes radar {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
            }
            70% {
                transform: scale(1);
                box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
            }
            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
            }
        }

        /* 图表占位符 */
        .chart-placeholder {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(139, 92, 246, 0.1) 50%, rgba(16, 185, 129, 0.1) 100%);
            border: 2px dashed rgba(0, 212, 255, 0.3);
            position: relative;
            overflow: hidden;
        }

        .chart-placeholder::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(transparent, rgba(0, 212, 255, 0.1), transparent);
            animation: scan 4s linear infinite;
        }

        @keyframes scan {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 按钮科技效果 */
        .cyber-button {
            position: relative;
            background: linear-gradient(45deg, #00d4ff, #8b5cf6);
            border: none;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .cyber-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: left 0.5s;
        }

        .cyber-button:hover::before {
            left: 100%;
        }

        /* 卡片悬浮效果 */
        .tech-card {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(0, 212, 255, 0.2);
        }

        .tech-card:hover {
            transform: translateY(-8px) rotateX(5deg);
            box-shadow: 
                0 20px 40px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(0, 212, 255, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        /* 文字科技效果 */
        .cyber-text {
            background: linear-gradient(45deg, #00d4ff, #8b5cf6, #10b981, #00d4ff);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: cyberpunk 3s ease infinite;
        }

        /* 滚动条美化 */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(45deg, #00d4ff, #8b5cf6);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(45deg, #8b5cf6, #10b981);
        }
    </style>
</head>
<body class="bg-gray-50 dark:bg-gray-900 font-sans transition-colors duration-300">
    <!-- 科技背景 -->
    <div class="tech-bg"></div>
    <!-- 顶部导航栏 -->
    <header class="bg-white dark:bg-gray-800 shadow-lg border-b border-gray-200 dark:border-gray-700 fixed top-0 left-0 right-0 z-50">
        <div class="flex items-center justify-between px-6 py-4">
            <!-- Logo和标题 -->
            <div class="flex items-center space-x-4">
                <button id="sidebar-toggle" class="lg:hidden text-gray-600 dark:text-gray-300 hover:text-tech-blue transition-colors">
                    <i class="fas fa-bars text-xl"></i>
                </button>
                <div class="flex items-center space-x-2">
                    <div class="w-8 h-8 bg-gradient-to-r from-tech-blue to-tech-purple rounded-lg flex items-center justify-center">
                        <i class="fas fa-flask text-white text-sm"></i>
                    </div>
                    <h1 class="text-xl font-bold tech-gradient">测试管理平台</h1>
                </div>
            </div>

            <!-- 搜索栏 -->
            <div class="hidden md:flex flex-1 max-w-md mx-8">
                <div class="relative w-full">
                    <input type="text" placeholder="搜索功能模块..." class="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-tech-blue focus:border-transparent">
                    <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                </div>
            </div>

            <!-- 右侧工具栏 -->
            <div class="flex items-center space-x-4">
                <!-- 主题切换 -->
                <button id="theme-toggle" class="p-2 text-gray-600 dark:text-gray-300 hover:text-tech-blue transition-colors hover-glow rounded-lg">
                    <i class="fas fa-moon dark:hidden"></i>
                    <i class="fas fa-sun hidden dark:inline"></i>
                </button>
                
                <!-- 通知 -->
                <button class="relative p-2 text-gray-600 dark:text-gray-300 hover:text-tech-blue transition-colors hover-glow rounded-lg">
                    <i class="fas fa-bell"></i>
                    <span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full animate-pulse"></span>
                </button>

                <!-- 用户头像 -->
                <div class="relative">
                    <button class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                        <div class="w-8 h-8 bg-gradient-to-r from-tech-blue to-tech-green rounded-full flex items-center justify-center">
                            <i class="fas fa-user text-white text-sm"></i>
                        </div>
                        <span class="hidden md:inline text-gray-700 dark:text-gray-300">管理员</span>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- 主容器 -->
    <div class="flex pt-16">
        <!-- 左侧导航栏 -->
        <aside id="sidebar" class="fixed left-0 top-16 h-screen w-64 bg-white dark:bg-gray-800 shadow-lg transform -translate-x-full lg:translate-x-0 transition-transform duration-300 z-40">
            <div class="p-4 h-full overflow-y-auto">
                <!-- 导航菜单 -->
                <nav class="space-y-2">
                    <!-- 首页 -->
                    <a href="#dashboard" class="nav-item flex items-center space-x-3 p-3 rounded-lg hover:bg-tech-blue hover:bg-opacity-10 transition-all duration-200 group active">
                        <i class="fas fa-home text-gray-600 dark:text-gray-400 group-hover:text-tech-blue"></i>
                        <span class="text-gray-700 dark:text-gray-300 group-hover:text-tech-blue font-medium">首页</span>
                    </a>

                    <!-- 测试管理 -->
                    <div class="nav-group">
                        <div class="nav-header flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-all duration-200">
                            <i class="fas fa-vial text-gray-600 dark:text-gray-400"></i>
                            <span class="text-gray-700 dark:text-gray-300 font-medium">测试管理</span>
                            <i class="fas fa-chevron-down ml-auto text-gray-400 transition-transform duration-200"></i>
                        </div>
                        <div class="nav-submenu ml-6 space-y-1 hidden">
                            <a href="#test-platform" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-tech-blue hover:bg-opacity-10 transition-all duration-200">
                                <i class="fas fa-globe text-sm text-gray-500 dark:text-gray-500"></i>
                                <span class="text-gray-600 dark:text-gray-400 text-sm">测试平台</span>
                            </a>
                            <a href="#test-cases" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-tech-blue hover:bg-opacity-10 transition-all duration-200">
                                <i class="fas fa-list text-sm text-gray-500 dark:text-gray-500"></i>
                                <span class="text-gray-600 dark:text-gray-400 text-sm">测试用例列表</span>
                            </a>
                            <a href="#create-case" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-tech-blue hover:bg-opacity-10 transition-all duration-200">
                                <i class="fas fa-plus text-sm text-gray-500 dark:text-gray-500"></i>
                                <span class="text-gray-600 dark:text-gray-400 text-sm">创建/更新测试用例</span>
                            </a>
                            <a href="#bind-cases" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-tech-blue hover:bg-opacity-10 transition-all duration-200">
                                <i class="fas fa-link text-sm text-gray-500 dark:text-gray-500"></i>
                                <span class="text-gray-600 dark:text-gray-400 text-sm">绑定测试用例</span>
                            </a>
                            <a href="#edit-script" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-tech-blue hover:bg-opacity-10 transition-all duration-200">
                                <i class="fas fa-code text-sm text-gray-500 dark:text-gray-500"></i>
                                <span class="text-gray-600 dark:text-gray-400 text-sm">编辑/查看执行脚本</span>
                            </a>
                        </div>
                    </div>

                    <!-- 任务管理 -->
                    <div class="nav-group">
                        <div class="nav-header flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-all duration-200">
                            <i class="fas fa-tasks text-gray-600 dark:text-gray-400"></i>
                            <span class="text-gray-700 dark:text-gray-300 font-medium">任务管理</span>
                            <i class="fas fa-chevron-down ml-auto text-gray-400 transition-transform duration-200"></i>
                        </div>
                        <div class="nav-submenu ml-6 space-y-1 hidden">
                            <a href="#task-list" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-tech-blue hover:bg-opacity-10 transition-all duration-200">
                                <i class="fas fa-clipboard-list text-sm text-gray-500 dark:text-gray-500"></i>
                                <span class="text-gray-600 dark:text-gray-400 text-sm">任务管理</span>
                            </a>
                            <a href="#create-task" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-tech-blue hover:bg-opacity-10 transition-all duration-200">
                                <i class="fas fa-plus-circle text-sm text-gray-500 dark:text-gray-500"></i>
                                <span class="text-gray-600 dark:text-gray-400 text-sm">创建任务</span>
                            </a>
                            <a href="#task-details" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-tech-blue hover:bg-opacity-10 transition-all duration-200">
                                <i class="fas fa-info-circle text-sm text-gray-500 dark:text-gray-500"></i>
                                <span class="text-gray-600 dark:text-gray-400 text-sm">任务详情</span>
                            </a>
                            <a href="#execute-task" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-tech-blue hover:bg-opacity-10 transition-all duration-200">
                                <i class="fas fa-play text-sm text-gray-500 dark:text-gray-500"></i>
                                <span class="text-gray-600 dark:text-gray-400 text-sm">执行任务</span>
                            </a>
                            <a href="#task-results" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-tech-blue hover:bg-opacity-10 transition-all duration-200">
                                <i class="fas fa-chart-line text-sm text-gray-500 dark:text-gray-500"></i>
                                <span class="text-gray-600 dark:text-gray-400 text-sm">任务执行结果</span>
                            </a>
                            <a href="#result-details" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-tech-blue hover:bg-opacity-10 transition-all duration-200">
                                <i class="fas fa-file-alt text-sm text-gray-500 dark:text-gray-500"></i>
                                <span class="text-gray-600 dark:text-gray-400 text-sm">执行结果详情</span>
                            </a>
                        </div>
                    </div>

                    <!-- 设备管理 -->
                    <div class="nav-group">
                        <div class="nav-header flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-all duration-200">
                            <i class="fas fa-server text-gray-600 dark:text-gray-400"></i>
                            <span class="text-gray-700 dark:text-gray-300 font-medium">设备管理</span>
                            <i class="fas fa-chevron-down ml-auto text-gray-400 transition-transform duration-200"></i>
                        </div>
                        <div class="nav-submenu ml-6 space-y-1 hidden">
                            <a href="#device-list" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-tech-blue hover:bg-opacity-10 transition-all duration-200">
                                <i class="fas fa-desktop text-sm text-gray-500 dark:text-gray-500"></i>
                                <span class="text-gray-600 dark:text-gray-400 text-sm">设备管理</span>
                            </a>
                            <a href="#create-device" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-tech-blue hover:bg-opacity-10 transition-all duration-200">
                                <i class="fas fa-plus-square text-sm text-gray-500 dark:text-gray-500"></i>
                                <span class="text-gray-600 dark:text-gray-400 text-sm">创建设备</span>
                            </a>
                            <a href="#device-details" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-tech-blue hover:bg-opacity-10 transition-all duration-200">
                                <i class="fas fa-info text-sm text-gray-500 dark:text-gray-500"></i>
                                <span class="text-gray-600 dark:text-gray-400 text-sm">设备详情</span>
                            </a>
                            <a href="#device-test" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-tech-blue hover:bg-opacity-10 transition-all duration-200">
                                <i class="fas fa-cog text-sm text-gray-500 dark:text-gray-500"></i>
                                <span class="text-gray-600 dark:text-gray-400 text-sm">设备测试</span>
                            </a>
                            <a href="#device-process" class="nav-item flex items-center space-x-3 p-2 rounded-lg hover:bg-tech-blue hover:bg-opacity-10 transition-all duration-200">
                                <i class="fas fa-memory text-sm text-gray-500 dark:text-gray-500"></i>
                                <span class="text-gray-600 dark:text-gray-400 text-sm">设备进程管理</span>
                            </a>
                        </div>
                    </div>
                </nav>
            </div>
        </aside>

        <!-- 主内容区 -->
        <main class="flex-1 lg:ml-64 p-6">
            <!-- 首页仪表板 -->
            <div id="dashboard" class="content-section animate-fadeIn">
                <!-- 页面标题 -->
                <div class="mb-8">
                    <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
                        <span class="tech-gradient">测试平台仪表板</span>
                    </h2>
                    <p class="text-gray-600 dark:text-gray-400">实时监控测试环境运行状态和执行结果</p>
                </div>

                <!-- 统计卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                    <div class="glass-effect rounded-xl p-6 tech-card data-stream">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-400 text-sm mb-2">总测试用例</p>
                                <p class="text-3xl font-bold cyber-text mb-1">1,248</p>
                                <div class="flex items-center">
                                    <span class="status-indicator online w-2 h-2 bg-green-400 rounded-full mr-2"></span>
                                    <p class="text-green-400 text-sm"><i class="fas fa-arrow-up mr-1"></i>12.5%</p>
                                </div>
                            </div>
                            <div class="w-16 h-16 cyber-gradient rounded-xl flex items-center justify-center animate-pulse">
                                <i class="fas fa-vial text-white text-xl"></i>
                            </div>
                        </div>
                        <div class="mt-4 h-2 bg-gray-700 rounded-full overflow-hidden">
                            <div class="tech-progress h-full w-3/4"></div>
                        </div>
                    </div>

                    <div class="glass-effect rounded-xl p-6 tech-card data-stream">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-400 text-sm mb-2">执行中任务</p>
                                <p class="text-3xl font-bold cyber-text mb-1">23</p>
                                <div class="flex items-center">
                                    <span class="status-indicator busy w-2 h-2 bg-yellow-400 rounded-full mr-2"></span>
                                    <p class="text-blue-400 text-sm"><i class="fas fa-play mr-1"></i>运行中</p>
                                </div>
                            </div>
                            <div class="w-16 h-16 cyber-gradient rounded-xl flex items-center justify-center animate-pulse">
                                <i class="fas fa-tasks text-white text-xl"></i>
                            </div>
                        </div>
                        <div class="mt-4 h-2 bg-gray-700 rounded-full overflow-hidden">
                            <div class="tech-progress h-full w-1/2"></div>
                        </div>
                    </div>

                    <div class="glass-effect rounded-xl p-6 tech-card data-stream">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-400 text-sm mb-2">在线设备</p>
                                <p class="text-3xl font-bold cyber-text mb-1">156</p>
                                <div class="flex items-center">
                                    <span class="status-indicator online w-2 h-2 bg-green-400 rounded-full mr-2"></span>
                                    <p class="text-green-400 text-sm"><i class="fas fa-circle mr-1"></i>健康</p>
                                </div>
                            </div>
                            <div class="w-16 h-16 cyber-gradient rounded-xl flex items-center justify-center animate-pulse">
                                <i class="fas fa-server text-white text-xl"></i>
                            </div>
                        </div>
                        <div class="mt-4 h-2 bg-gray-700 rounded-full overflow-hidden">
                            <div class="tech-progress h-full w-5/6"></div>
                        </div>
                    </div>

                    <div class="glass-effect rounded-xl p-6 tech-card data-stream">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-400 text-sm mb-2">成功率</p>
                                <p class="text-3xl font-bold cyber-text mb-1">94.2%</p>
                                <div class="flex items-center">
                                    <span class="status-indicator online w-2 h-2 bg-green-400 rounded-full mr-2"></span>
                                    <p class="text-green-400 text-sm"><i class="fas fa-check mr-1"></i>优秀</p>
                                </div>
                            </div>
                            <div class="w-16 h-16 cyber-gradient rounded-xl flex items-center justify-center animate-pulse">
                                <i class="fas fa-chart-line text-white text-xl"></i>
                            </div>
                        </div>
                        <div class="mt-4 h-2 bg-gray-700 rounded-full overflow-hidden">
                            <div class="tech-progress h-full w-11/12"></div>
                        </div>
                    </div>
                </div>

                <!-- 图表区域 -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                    <div class="glass-effect rounded-xl p-6 tech-card">
                        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
                            <i class="fas fa-chart-area mr-2"></i>测试执行趋势
                        </h3>
                        <div id="chart1" class="chart-placeholder h-64 rounded-lg flex items-center justify-center">
                            <div class="text-center">
                                <div class="relative">
                                    <i class="fas fa-chart-area text-6xl text-tech-blue mb-4 animate-pulse"></i>
                                    <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-16 h-16 border-4 border-tech-blue border-t-transparent rounded-full animate-spin"></div>
                                </div>
                                <p class="text-gray-400 cyber-text">数据流传输中...</p>
                                <div class="mt-4 flex justify-center space-x-2">
                                    <div class="w-2 h-2 bg-tech-blue rounded-full animate-bounce"></div>
                                    <div class="w-2 h-2 bg-tech-purple rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
                                    <div class="w-2 h-2 bg-tech-green rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="glass-effect rounded-xl p-6 tech-card">
                        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
                            <i class="fas fa-chart-pie mr-2"></i>设备状态分布
                        </h3>
                        <div id="chart2" class="chart-placeholder h-64 rounded-lg flex items-center justify-center">
                            <div class="text-center">
                                <div class="relative">
                                    <i class="fas fa-chart-pie text-6xl text-tech-purple mb-4 animate-pulse"></i>
                                    <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-16 h-16 border-4 border-tech-purple border-t-transparent rounded-full animate-spin"></div>
                                </div>
                                <p class="text-gray-400 cyber-text">实时扫描中...</p>
                                <div class="mt-4 flex justify-center space-x-2">
                                    <div class="w-2 h-2 bg-tech-purple rounded-full animate-bounce"></div>
                                    <div class="w-2 h-2 bg-tech-green rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
                                    <div class="w-2 h-2 bg-tech-blue rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 快速操作 -->
                <div class="glass-effect rounded-xl p-6 tech-card">
                    <h3 class="text-lg font-bold cyber-text mb-6 flex items-center">
                        <i class="fas fa-rocket mr-2"></i>快速操作中心
                    </h3>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <button class="cyber-button p-6 text-white rounded-xl hover-glow transition-all duration-300 relative group">
                            <div class="relative z-10">
                                <i class="fas fa-plus mb-3 text-2xl"></i>
                                <p class="text-sm font-medium">创建测试用例</p>
                            </div>
                            <div class="absolute inset-0 bg-gradient-to-r from-tech-blue to-tech-purple rounded-xl opacity-80 group-hover:opacity-100 transition-opacity"></div>
                        </button>
                        <button class="cyber-button p-6 text-white rounded-xl hover-glow transition-all duration-300 relative group">
                            <div class="relative z-10">
                                <i class="fas fa-play mb-3 text-2xl"></i>
                                <p class="text-sm font-medium">执行任务</p>
                            </div>
                            <div class="absolute inset-0 bg-gradient-to-r from-tech-purple to-tech-green rounded-xl opacity-80 group-hover:opacity-100 transition-opacity"></div>
                        </button>
                        <button class="cyber-button p-6 text-white rounded-xl hover-glow transition-all duration-300 relative group">
                            <div class="relative z-10">
                                <i class="fas fa-server mb-3 text-2xl"></i>
                                <p class="text-sm font-medium">添加设备</p>
                            </div>
                            <div class="absolute inset-0 bg-gradient-to-r from-tech-green to-tech-blue rounded-xl opacity-80 group-hover:opacity-100 transition-opacity"></div>
                        </button>
                        <button class="cyber-button p-6 text-white rounded-xl hover-glow transition-all duration-300 relative group">
                            <div class="relative z-10">
                                <i class="fas fa-chart-bar mb-3 text-2xl"></i>
                                <p class="text-sm font-medium">查看报告</p>
                            </div>
                            <div class="absolute inset-0 bg-gradient-to-r from-tech-blue to-tech-green rounded-xl opacity-80 group-hover:opacity-100 transition-opacity"></div>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 测试平台 -->
            <div id="test-platform" class="content-section hidden animate-fadeIn">
                <div class="mb-6">
                    <h2 class="text-2xl font-bold tech-gradient mb-2">测试平台</h2>
                    <p class="text-gray-600 dark:text-gray-400">管理和配置测试环境平台</p>
                </div>

                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700">
                    <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                        <div class="flex justify-between items-center">
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">平台列表</h3>
                            <button class="px-4 py-2 bg-gradient-to-r from-tech-blue to-tech-purple text-white rounded-lg hover-glow transition-all duration-200">
                                <i class="fas fa-plus mr-2"></i>添加平台
                            </button>
                        </div>
                    </div>
                    
                    <div class="p-6">
                        <div class="overflow-x-auto">
                            <table class="w-full">
                                <thead>
                                    <tr class="border-b border-gray-200 dark:border-gray-700">
                                        <th class="text-left py-3 px-4 text-gray-600 dark:text-gray-400 font-medium">平台名称</th>
                                        <th class="text-left py-3 px-4 text-gray-600 dark:text-gray-400 font-medium">类型</th>
                                        <th class="text-left py-3 px-4 text-gray-600 dark:text-gray-400 font-medium">状态</th>
                                        <th class="text-left py-3 px-4 text-gray-600 dark:text-gray-400 font-medium">最后更新</th>
                                        <th class="text-left py-3 px-4 text-gray-600 dark:text-gray-400 font-medium">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                        <td class="py-3 px-4 text-gray-900 dark:text-white">Web测试平台</td>
                                        <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Web</td>
                                        <td class="py-3 px-4">
                                            <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">运行中</span>
                                        </td>
                                        <td class="py-3 px-4 text-gray-600 dark:text-gray-400">2024-01-15 14:30</td>
                                        <td class="py-3 px-4">
                                            <div class="flex space-x-2">
                                                <button class="text-tech-blue hover:text-tech-purple transition-colors">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button class="text-red-500 hover:text-red-700 transition-colors">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                        <td class="py-3 px-4 text-gray-900 dark:text-white">移动端测试平台</td>
                                        <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Mobile</td>
                                        <td class="py-3 px-4">
                                            <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">待机</span>
                                        </td>
                                        <td class="py-3 px-4 text-gray-600 dark:text-gray-400">2024-01-15 10:15</td>
                                        <td class="py-3 px-4">
                                            <div class="flex space-x-2">
                                                <button class="text-tech-blue hover:text-tech-purple transition-colors">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button class="text-red-500 hover:text-red-700 transition-colors">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 其他内容区域可以根据需要继续添加 -->
            <div id="test-cases" class="content-section hidden animate-fadeIn">
                <div class="mb-6">
                    <h2 class="text-2xl font-bold tech-gradient mb-2">测试用例列表</h2>
                    <p class="text-gray-600 dark:text-gray-400">管理所有测试用例</p>
                </div>
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-gray-700">
                    <p class="text-gray-600 dark:text-gray-400">测试用例内容将在这里显示...</p>
                </div>
            </div>

            <!-- 创建测试用例 -->
            <div id="create-case" class="content-section hidden animate-fadeIn">
                <div class="mb-6">
                    <h2 class="text-2xl font-bold cyber-text mb-2">创建/更新测试用例</h2>
                    <p class="text-gray-400">新建或编辑测试用例</p>
                </div>
                <div class="glass-effect rounded-xl p-6 tech-card">
                    <form class="space-y-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-300 mb-2">用例名称</label>
                                <input type="text" class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-300 mb-2">优先级</label>
                                <select class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all">
                                    <option>高</option>
                                    <option>中</option>
                                    <option>低</option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-300 mb-2">用例描述</label>
                            <textarea rows="4" class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all"></textarea>
                        </div>
                        <div class="flex justify-end space-x-4">
                            <button type="button" class="px-6 py-3 border border-gray-600 text-gray-300 rounded-lg hover:bg-gray-700 transition-colors">
                                取消
                            </button>
                            <button type="submit" class="cyber-button px-6 py-3 text-white rounded-lg hover-glow transition-all duration-200">
                                保存用例
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 绑定测试用例 -->
            <div id="bind-cases" class="content-section hidden animate-fadeIn">
                <div class="mb-6">
                    <h2 class="text-2xl font-bold cyber-text mb-2">绑定测试用例</h2>
                    <p class="text-gray-400">将测试用例绑定到测试任务</p>
                </div>
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- 可用测试用例 -->
                    <div class="glass-effect rounded-xl p-6 tech-card">
                        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
                            <i class="fas fa-list mr-2"></i>可用测试用例
                        </h3>
                        <div class="space-y-3 max-h-96 overflow-y-auto">
                            <div class="flex items-center justify-between p-3 bg-gray-800/30 rounded-lg border border-gray-600 hover:border-tech-blue transition-colors">
                                <div>
                                    <h4 class="text-white font-medium">登录功能测试</h4>
                                    <p class="text-gray-400 text-sm">验证用户登录流程</p>
                                </div>
                                <button class="cyber-button px-3 py-1 text-xs text-white rounded">绑定</button>
                            </div>
                            <div class="flex items-center justify-between p-3 bg-gray-800/30 rounded-lg border border-gray-600 hover:border-tech-blue transition-colors">
                                <div>
                                    <h4 class="text-white font-medium">API接口测试</h4>
                                    <p class="text-gray-400 text-sm">测试REST API响应</p>
                                </div>
                                <button class="cyber-button px-3 py-1 text-xs text-white rounded">绑定</button>
                            </div>
                            <div class="flex items-center justify-between p-3 bg-gray-800/30 rounded-lg border border-gray-600 hover:border-tech-blue transition-colors">
                                <div>
                                    <h4 class="text-white font-medium">性能压力测试</h4>
                                    <p class="text-gray-400 text-sm">高并发负载测试</p>
                                </div>
                                <button class="cyber-button px-3 py-1 text-xs text-white rounded">绑定</button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 已绑定测试用例 -->
                    <div class="glass-effect rounded-xl p-6 tech-card">
                        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
                            <i class="fas fa-link mr-2"></i>已绑定测试用例
                        </h3>
                        <div class="space-y-3 max-h-96 overflow-y-auto">
                            <div class="flex items-center justify-between p-3 bg-green-900/20 rounded-lg border border-green-500/30">
                                <div>
                                    <h4 class="text-white font-medium">UI界面测试</h4>
                                    <p class="text-green-400 text-sm">已绑定到任务#001</p>
                                </div>
                                <button class="px-3 py-1 text-xs text-red-400 border border-red-400 rounded hover:bg-red-400 hover:text-white transition-colors">
                                    解绑
                                </button>
                            </div>
                            <div class="flex items-center justify-between p-3 bg-green-900/20 rounded-lg border border-green-500/30">
                                <div>
                                    <h4 class="text-white font-medium">数据库连接测试</h4>
                                    <p class="text-green-400 text-sm">已绑定到任务#002</p>
                                </div>
                                <button class="px-3 py-1 text-xs text-red-400 border border-red-400 rounded hover:bg-red-400 hover:text-white transition-colors">
                                    解绑
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 编辑/查看执行脚本 -->
            <div id="edit-script" class="content-section hidden animate-fadeIn">
                <div class="mb-6">
                    <h2 class="text-2xl font-bold cyber-text mb-2">编辑/查看执行脚本</h2>
                    <p class="text-gray-400">管理测试执行脚本和自动化代码</p>
                </div>
                <div class="glass-effect rounded-xl p-6 tech-card">
                    <div class="flex justify-between items-center mb-6">
                        <div class="flex items-center space-x-4">
                            <select class="px-4 py-2 bg-gray-800/50 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-tech-blue">
                                <option>login_test.py</option>
                                <option>api_test.js</option>
                                <option>performance_test.py</option>
                            </select>
                            <div class="flex space-x-2">
                                <button class="cyber-button px-4 py-2 text-white rounded-lg text-sm">新建</button>
                                <button class="px-4 py-2 border border-gray-600 text-gray-300 rounded-lg hover:bg-gray-700 transition-colors text-sm">删除</button>
                            </div>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="status-indicator online w-3 h-3 bg-green-400 rounded-full"></span>
                            <span class="text-green-400 text-sm">语法正确</span>
                        </div>
                    </div>
                    
                    <!-- 代码编辑器 -->
                    <div class="bg-gray-900 rounded-lg p-4 border border-gray-600 data-stream">
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex space-x-2">
                                <div class="w-3 h-3 bg-red-500 rounded-full"></div>
                                <div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
                                <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                            </div>
                            <span class="text-gray-400 text-sm">Python</span>
                        </div>
                        <pre class="text-green-400 text-sm leading-relaxed"><code># 登录测试脚本
import selenium
from selenium import webdriver
from selenium.webdriver.common.by import By

def test_login():
    driver = webdriver.Chrome()
    driver.get("https://test-platform.com/login")
    
    # 输入用户名
    username = driver.find_element(By.ID, "username")
    username.send_keys("admin")
    
    # 输入密码
    password = driver.find_element(By.ID, "password")
    password.send_keys("password123")
    
    # 点击登录按钮
    login_btn = driver.find_element(By.ID, "login-btn")
    login_btn.click()
    
    # 验证登录成功
    assert "dashboard" in driver.current_url
    
    driver.quit()

if __name__ == "__main__":
    test_login()
    print("✅ 登录测试通过")</code></pre>
                    </div>
                    
                    <div class="flex justify-between items-center mt-6">
                        <div class="flex space-x-4">
                            <button class="cyber-button px-4 py-2 text-white rounded-lg">
                                <i class="fas fa-save mr-2"></i>保存
                            </button>
                            <button class="cyber-button px-4 py-2 text-white rounded-lg">
                                <i class="fas fa-play mr-2"></i>运行测试
                            </button>
                        </div>
                        <div class="text-gray-400 text-sm">
                            最后修改: 2024-01-15 14:30:25
                        </div>
                    </div>
                </div>
            </div>

            <!-- 任务管理 -->
            <div id="task-list" class="content-section hidden animate-fadeIn">
                <div class="mb-6">
                    <h2 class="text-2xl font-bold cyber-text mb-2">任务管理</h2>
                    <p class="text-gray-400">查看和管理所有测试任务</p>
                </div>
                
                <div class="glass-effect rounded-xl p-6 tech-card">
                    <div class="flex justify-between items-center mb-6">
                        <div class="flex items-center space-x-4">
                            <input type="text" placeholder="搜索任务..." class="px-4 py-2 bg-gray-800/50 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-tech-blue">
                            <select class="px-4 py-2 bg-gray-800/50 border border-gray-600 rounded-lg text-white">
                                <option>全部状态</option>
                                <option>运行中</option>
                                <option>已完成</option>
                                <option>失败</option>
                                <option>等待中</option>
                            </select>
                        </div>
                        <button class="cyber-button px-4 py-2 text-white rounded-lg">
                            <i class="fas fa-plus mr-2"></i>新建任务
                        </button>
                    </div>
                    
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead>
                                <tr class="border-b border-gray-700">
                                    <th class="text-left py-4 px-4 text-gray-300 font-medium">任务ID</th>
                                    <th class="text-left py-4 px-4 text-gray-300 font-medium">任务名称</th>
                                    <th class="text-left py-4 px-4 text-gray-300 font-medium">状态</th>
                                    <th class="text-left py-4 px-4 text-gray-300 font-medium">进度</th>
                                    <th class="text-left py-4 px-4 text-gray-300 font-medium">创建时间</th>
                                    <th class="text-left py-4 px-4 text-gray-300 font-medium">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="border-b border-gray-700/50 hover:bg-gray-800/30 transition-colors">
                                    <td class="py-4 px-4 text-tech-blue font-mono">#001</td>
                                    <td class="py-4 px-4 text-white">Web登录流程测试</td>
                                    <td class="py-4 px-4">
                                        <span class="flex items-center">
                                            <span class="status-indicator busy w-2 h-2 bg-yellow-400 rounded-full mr-2"></span>
                                            <span class="text-yellow-400">运行中</span>
                                        </span>
                                    </td>
                                    <td class="py-4 px-4">
                                        <div class="flex items-center space-x-2">
                                            <div class="w-20 h-2 bg-gray-700 rounded-full overflow-hidden">
                                                <div class="tech-progress h-full w-3/4"></div>
                                            </div>
                                            <span class="text-gray-400 text-sm">75%</span>
                                        </div>
                                    </td>
                                    <td class="py-4 px-4 text-gray-400">2024-01-15 10:30</td>
                                    <td class="py-4 px-4">
                                        <div class="flex space-x-2">
                                            <button class="text-tech-blue hover:text-tech-purple transition-colors">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <button class="text-yellow-400 hover:text-yellow-300 transition-colors">
                                                <i class="fas fa-pause"></i>
                                            </button>
                                            <button class="text-red-400 hover:text-red-300 transition-colors">
                                                <i class="fas fa-stop"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="border-b border-gray-700/50 hover:bg-gray-800/30 transition-colors">
                                    <td class="py-4 px-4 text-tech-blue font-mono">#002</td>
                                    <td class="py-4 px-4 text-white">API接口性能测试</td>
                                    <td class="py-4 px-4">
                                        <span class="flex items-center">
                                            <span class="status-indicator online w-2 h-2 bg-green-400 rounded-full mr-2"></span>
                                            <span class="text-green-400">已完成</span>
                                        </span>
                                    </td>
                                    <td class="py-4 px-4">
                                        <div class="flex items-center space-x-2">
                                            <div class="w-20 h-2 bg-gray-700 rounded-full overflow-hidden">
                                                <div class="tech-progress h-full w-full"></div>
                                            </div>
                                            <span class="text-gray-400 text-sm">100%</span>
                                        </div>
                                    </td>
                                    <td class="py-4 px-4 text-gray-400">2024-01-15 09:15</td>
                                    <td class="py-4 px-4">
                                        <div class="flex space-x-2">
                                            <button class="text-tech-blue hover:text-tech-purple transition-colors">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <button class="text-green-400 hover:text-green-300 transition-colors">
                                                <i class="fas fa-download"></i>
                                            </button>
                                            <button class="text-gray-400 hover:text-gray-300 transition-colors">
                                                <i class="fas fa-copy"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 创建任务 -->
            <div id="create-task" class="content-section hidden animate-fadeIn">
                <div class="mb-6">
                    <h2 class="text-2xl font-bold cyber-text mb-2">创建任务</h2>
                    <p class="text-gray-400">创建新的测试任务</p>
                </div>
                
                <div class="glass-effect rounded-xl p-6 tech-card">
                    <form class="space-y-6">
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-300 mb-2">任务名称</label>
                                <input type="text" class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all" placeholder="输入任务名称">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-300 mb-2">任务类型</label>
                                <select class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all">
                                    <option>功能测试</option>
                                    <option>性能测试</option>
                                    <option>安全测试</option>
                                    <option>兼容性测试</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-300 mb-2">优先级</label>
                                <select class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all">
                                    <option>高</option>
                                    <option>中</option>
                                    <option>低</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-300 mb-2">执行设备</label>
                                <select class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all">
                                    <option>服务器-001</option>
                                    <option>服务器-002</option>
                                    <option>测试集群</option>
                                </select>
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-300 mb-2">任务描述</label>
                            <textarea rows="4" class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all" placeholder="描述任务目标和要求"></textarea>
                        </div>
                        
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-300 mb-2">计划开始时间</label>
                                <input type="datetime-local" class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-300 mb-2">预计执行时长</label>
                                <input type="number" class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all" placeholder="分钟">
                            </div>
                        </div>
                        
                        <div class="flex justify-end space-x-4">
                            <button type="button" class="px-6 py-3 border border-gray-600 text-gray-300 rounded-lg hover:bg-gray-700 transition-colors">
                                取消
                            </button>
                            <button type="submit" class="cyber-button px-6 py-3 text-white rounded-lg hover-glow transition-all duration-200">
                                创建任务
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 任务详情 -->
            <div id="task-details" class="content-section hidden animate-fadeIn">
                <div class="mb-6">
                    <h2 class="text-2xl font-bold cyber-text mb-2">任务详情</h2>
                    <p class="text-gray-400">查看任务的详细信息和执行状态</p>
                </div>
                
                <div class="space-y-6">
                    <!-- 任务基本信息 -->
                    <div class="glass-effect rounded-xl p-6 tech-card">
                        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
                            <i class="fas fa-info-circle mr-2"></i>基本信息
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            <div>
                                <label class="block text-sm text-gray-400 mb-1">任务ID</label>
                                <p class="text-tech-blue font-mono text-lg">#001</p>
                            </div>
                            <div>
                                <label class="block text-sm text-gray-400 mb-1">任务名称</label>
                                <p class="text-white">Web登录流程测试</p>
                            </div>
                            <div>
                                <label class="block text-sm text-gray-400 mb-1">状态</label>
                                <span class="flex items-center">
                                    <span class="status-indicator busy w-3 h-3 bg-yellow-400 rounded-full mr-2"></span>
                                    <span class="text-yellow-400">运行中</span>
                                </span>
                            </div>
                            <div>
                                <label class="block text-sm text-gray-400 mb-1">创建时间</label>
                                <p class="text-white">2024-01-15 10:30:25</p>
                            </div>
                            <div>
                                <label class="block text-sm text-gray-400 mb-1">执行设备</label>
                                <p class="text-white">服务器-001</p>
                            </div>
                            <div>
                                <label class="block text-sm text-gray-400 mb-1">优先级</label>
                                <span class="px-2 py-1 bg-red-900/30 text-red-400 rounded-full text-sm">高</span>
                            </div>
                        </div>
                    </div>

                    <!-- 执行进度 -->
                    <div class="glass-effect rounded-xl p-6 tech-card">
                        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
                            <i class="fas fa-chart-line mr-2"></i>执行进度
                        </h3>
                        <div class="space-y-4">
                            <div class="flex justify-between items-center">
                                <span class="text-gray-300">总体进度</span>
                                <span class="text-tech-blue font-mono">75%</span>
                            </div>
                            <div class="w-full h-4 bg-gray-700 rounded-full overflow-hidden">
                                <div class="tech-progress h-full w-3/4"></div>
                            </div>
                            
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
                                <div class="text-center p-4 bg-gray-800/30 rounded-lg">
                                    <div class="text-2xl font-bold text-green-400">12</div>
                                    <div class="text-gray-400 text-sm">已完成</div>
                                </div>
                                <div class="text-center p-4 bg-gray-800/30 rounded-lg">
                                    <div class="text-2xl font-bold text-yellow-400">3</div>
                                    <div class="text-gray-400 text-sm">执行中</div>
                                </div>
                                <div class="text-center p-4 bg-gray-800/30 rounded-lg">
                                    <div class="text-2xl font-bold text-gray-400">1</div>
                                    <div class="text-gray-400 text-sm">待执行</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 测试用例列表 -->
                    <div class="glass-effect rounded-xl p-6 tech-card">
                        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
                            <i class="fas fa-list-check mr-2"></i>关联测试用例
                        </h3>
                        <div class="space-y-3">
                            <div class="flex items-center justify-between p-3 bg-green-900/20 rounded-lg border border-green-500/30">
                                <div class="flex items-center space-x-3">
                                    <i class="fas fa-check-circle text-green-400"></i>
                                    <div>
                                        <h4 class="text-white">用户登录验证</h4>
                                        <p class="text-gray-400 text-sm">执行时间: 2分30秒</p>
                                    </div>
                                </div>
                                <span class="text-green-400 text-sm">已完成</span>
                            </div>
                            <div class="flex items-center justify-between p-3 bg-yellow-900/20 rounded-lg border border-yellow-500/30">
                                <div class="flex items-center space-x-3">
                                    <i class="fas fa-spinner animate-spin text-yellow-400"></i>
                                    <div>
                                        <h4 class="text-white">密码错误处理</h4>
                                        <p class="text-gray-400 text-sm">正在执行...</p>
                                    </div>
                                </div>
                                <span class="text-yellow-400 text-sm">执行中</span>
                            </div>
                            <div class="flex items-center justify-between p-3 bg-gray-800/30 rounded-lg border border-gray-600">
                                <div class="flex items-center space-x-3">
                                    <i class="fas fa-clock text-gray-400"></i>
                                    <div>
                                        <h4 class="text-white">会话超时测试</h4>
                                        <p class="text-gray-400 text-sm">等待执行</p>
                                    </div>
                                </div>
                                <span class="text-gray-400 text-sm">待执行</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 执行任务 -->
            <div id="execute-task" class="content-section hidden animate-fadeIn">
                <div class="mb-6">
                    <h2 class="text-2xl font-bold cyber-text mb-2">执行任务</h2>
                    <p class="text-gray-400">启动和监控任务执行</p>
                </div>
                
                <div class="space-y-6">
                    <!-- 任务选择和配置 -->
                    <div class="glass-effect rounded-xl p-6 tech-card">
                        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
                            <i class="fas fa-play-circle mr-2"></i>任务执行配置
                        </h3>
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-300 mb-2">选择任务</label>
                                <select class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all">
                                    <option>Web登录流程测试</option>
                                    <option>API接口性能测试</option>
                                    <option>移动端兼容性测试</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-300 mb-2">执行模式</label>
                                <select class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all">
                                    <option>立即执行</option>
                                    <option>定时执行</option>
                                    <option>条件触发</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="mt-6 flex justify-center">
                            <button class="cyber-button px-8 py-4 text-white rounded-xl hover-glow transition-all duration-300 text-lg">
                                <i class="fas fa-rocket mr-3"></i>启动执行
                            </button>
                        </div>
                    </div>

                    <!-- 实时监控 -->
                    <div class="glass-effect rounded-xl p-6 tech-card">
                        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
                            <i class="fas fa-desktop mr-2"></i>实时监控台
                        </h3>
                        <div class="bg-gray-900 rounded-lg p-4 border border-gray-600 data-stream h-80 overflow-y-auto">
                            <div class="font-mono text-sm space-y-2">
                                <div class="text-green-400">[10:30:25] 任务初始化完成</div>
                                <div class="text-blue-400">[10:30:26] 开始执行测试用例: 用户登录验证</div>
                                <div class="text-green-400">[10:32:56] ✅ 用户登录验证 - 通过</div>
                                <div class="text-blue-400">[10:32:57] 开始执行测试用例: 密码错误处理</div>
                                <div class="text-yellow-400">[10:33:15] ⚠️  检测到异常情况，正在重试...</div>
                                <div class="text-green-400">[10:33:45] ✅ 密码错误处理 - 通过</div>
                                <div class="text-blue-400">[10:33:46] 开始执行测试用例: 会话超时测试</div>
                                <div class="text-yellow-400 animate-pulse">[10:34:10] 🔄 会话超时测试执行中...</div>
                            </div>
                        </div>
                        
                        <div class="flex justify-between items-center mt-4">
                            <div class="flex space-x-4">
                                <button class="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-500 transition-colors">
                                    <i class="fas fa-pause mr-2"></i>暂停
                                </button>
                                <button class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-500 transition-colors">
                                    <i class="fas fa-stop mr-2"></i>停止
                                </button>
                            </div>
                            <div class="text-gray-400 text-sm">
                                运行时间: 03:45
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 任务执行结果 -->
            <div id="task-results" class="content-section hidden animate-fadeIn">
                <div class="mb-6">
                    <h2 class="text-2xl font-bold cyber-text mb-2">任务执行结果</h2>
                    <p class="text-gray-400">查看任务执行的结果统计和报告</p>
                </div>
                
                <div class="space-y-6">
                    <!-- 结果概览 -->
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                        <div class="glass-effect rounded-xl p-6 tech-card text-center">
                            <div class="text-3xl font-bold text-green-400 mb-2">92%</div>
                            <div class="text-gray-400">成功率</div>
                            <div class="mt-2 h-2 bg-gray-700 rounded-full overflow-hidden">
                                <div class="h-full bg-green-400 rounded-full" style="width: 92%"></div>
                            </div>
                        </div>
                        <div class="glass-effect rounded-xl p-6 tech-card text-center">
                            <div class="text-3xl font-bold cyber-text mb-2">46</div>
                            <div class="text-gray-400">总用例数</div>
                        </div>
                        <div class="glass-effect rounded-xl p-6 tech-card text-center">
                            <div class="text-3xl font-bold text-green-400 mb-2">42</div>
                            <div class="text-gray-400">通过</div>
                        </div>
                        <div class="glass-effect rounded-xl p-6 tech-card text-center">
                            <div class="text-3xl font-bold text-red-400 mb-2">4</div>
                            <div class="text-gray-400">失败</div>
                        </div>
                    </div>

                    <!-- 详细结果列表 -->
                    <div class="glass-effect rounded-xl p-6 tech-card">
                        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
                            <i class="fas fa-chart-bar mr-2"></i>执行结果详情
                        </h3>
                        <div class="overflow-x-auto">
                            <table class="w-full">
                                <thead>
                                    <tr class="border-b border-gray-700">
                                        <th class="text-left py-3 px-4 text-gray-300">测试用例</th>
                                        <th class="text-left py-3 px-4 text-gray-300">状态</th>
                                        <th class="text-left py-3 px-4 text-gray-300">执行时间</th>
                                        <th class="text-left py-3 px-4 text-gray-300">错误信息</th>
                                        <th class="text-left py-3 px-4 text-gray-300">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="border-b border-gray-700/50 hover:bg-gray-800/30">
                                        <td class="py-3 px-4 text-white">用户登录验证</td>
                                        <td class="py-3 px-4">
                                            <span class="flex items-center text-green-400">
                                                <i class="fas fa-check-circle mr-2"></i>通过
                                            </span>
                                        </td>
                                        <td class="py-3 px-4 text-gray-400">2.5s</td>
                                        <td class="py-3 px-4 text-gray-400">-</td>
                                        <td class="py-3 px-4">
                                            <button class="text-tech-blue hover:text-tech-purple">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr class="border-b border-gray-700/50 hover:bg-gray-800/30">
                                        <td class="py-3 px-4 text-white">API响应时间测试</td>
                                        <td class="py-3 px-4">
                                            <span class="flex items-center text-red-400">
                                                <i class="fas fa-times-circle mr-2"></i>失败
                                            </span>
                                        </td>
                                        <td class="py-3 px-4 text-gray-400">5.2s</td>
                                        <td class="py-3 px-4 text-red-400 text-sm">超时</td>
                                        <td class="py-3 px-4">
                                            <button class="text-tech-blue hover:text-tech-purple">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 执行结果详情 -->
            <div id="result-details" class="content-section hidden animate-fadeIn">
                <div class="mb-6">
                    <h2 class="text-2xl font-bold cyber-text mb-2">执行结果详情</h2>
                    <p class="text-gray-400">查看单个测试用例的详细执行结果</p>
                </div>
                
                <div class="space-y-6">
                    <!-- 用例基本信息 -->
                    <div class="glass-effect rounded-xl p-6 tech-card">
                        <h3 class="text-lg font-bold cyber-text mb-4">测试用例: API响应时间测试</h3>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div>
                                <label class="block text-sm text-gray-400 mb-1">执行状态</label>
                                <span class="flex items-center text-red-400">
                                    <i class="fas fa-times-circle mr-2"></i>失败
                                </span>
                            </div>
                            <div>
                                <label class="block text-sm text-gray-400 mb-1">执行时间</label>
                                <p class="text-white">5.2秒</p>
                            </div>
                            <div>
                                <label class="block text-sm text-gray-400 mb-1">开始时间</label>
                                <p class="text-white">2024-01-15 10:35:20</p>
                            </div>
                        </div>
                    </div>

                    <!-- 错误详情 -->
                    <div class="glass-effect rounded-xl p-6 tech-card">
                        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
                            <i class="fas fa-exclamation-triangle mr-2 text-red-400"></i>错误详情
                        </h3>
                        <div class="bg-red-900/20 border border-red-500/30 rounded-lg p-4">
                            <h4 class="text-red-400 font-semibold mb-2">TimeoutError</h4>
                            <p class="text-gray-300 mb-4">API请求超时，响应时间超过5秒阈值</p>
                            <div class="bg-gray-900 rounded p-3 font-mono text-sm text-red-300">
                                <div>requests.exceptions.Timeout: HTTPSConnectionPool(host='api.test.com', port=443):</div>
                                <div>Read timed out. (read timeout=5)</div>
                                <div>at line 45 in test_api_response_time()</div>
                            </div>
                        </div>
                    </div>

                    <!-- 执行日志 -->
                    <div class="glass-effect rounded-xl p-6 tech-card">
                        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
                            <i class="fas fa-file-alt mr-2"></i>执行日志
                        </h3>
                        <div class="bg-gray-900 rounded-lg p-4 border border-gray-600 h-64 overflow-y-auto">
                            <div class="font-mono text-sm space-y-1">
                                <div class="text-gray-400">[10:35:20] 开始执行 API响应时间测试</div>
                                <div class="text-blue-400">[10:35:20] 初始化 HTTP 客户端</div>
                                <div class="text-blue-400">[10:35:21] 发送 GET 请求到 /api/users</div>
                                <div class="text-yellow-400">[10:35:23] 等待响应...</div>
                                <div class="text-yellow-400">[10:35:25] 响应时间超过 3s 警告</div>
                                <div class="text-red-400">[10:35:26] 请求超时，响应时间: 5.2s</div>
                                <div class="text-red-400">[10:35:26] 测试失败: 超出阈值</div>
                            </div>
                        </div>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="flex justify-between items-center">
                        <div class="flex space-x-4">
                            <button class="cyber-button px-4 py-2 text-white rounded-lg">
                                <i class="fas fa-redo mr-2"></i>重新执行
                            </button>
                            <button class="px-4 py-2 border border-gray-600 text-gray-300 rounded-lg hover:bg-gray-700 transition-colors">
                                <i class="fas fa-download mr-2"></i>下载日志
                            </button>
                        </div>
                        <button class="px-4 py-2 border border-gray-600 text-gray-300 rounded-lg hover:bg-gray-700 transition-colors">
                            返回列表
                        </button>
                    </div>
                </div>
            </div>

            <!-- 设备管理 -->
            <div id="device-list" class="content-section hidden animate-fadeIn">
                <div class="mb-6">
                    <h2 class="text-2xl font-bold cyber-text mb-2">设备管理</h2>
                    <p class="text-gray-400">管理测试设备和服务器资源</p>
                </div>
                
                <div class="space-y-6">
                    <!-- 设备统计 -->
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                        <div class="glass-effect rounded-xl p-6 tech-card text-center">
                            <div class="text-2xl font-bold text-green-400 mb-2">156</div>
                            <div class="text-gray-400">在线设备</div>
                            <div class="flex items-center justify-center mt-2">
                                <span class="status-indicator online w-2 h-2 bg-green-400 rounded-full mr-2"></span>
                                <span class="text-green-400 text-sm">正常</span>
                            </div>
                        </div>
                        <div class="glass-effect rounded-xl p-6 tech-card text-center">
                            <div class="text-2xl font-bold text-red-400 mb-2">12</div>
                            <div class="text-gray-400">离线设备</div>
                            <div class="flex items-center justify-center mt-2">
                                <span class="status-indicator offline w-2 h-2 bg-red-400 rounded-full mr-2"></span>
                                <span class="text-red-400 text-sm">异常</span>
                            </div>
                        </div>
                        <div class="glass-effect rounded-xl p-6 tech-card text-center">
                            <div class="text-2xl font-bold text-yellow-400 mb-2">8</div>
                            <div class="text-gray-400">忙碌设备</div>
                            <div class="flex items-center justify-center mt-2">
                                <span class="status-indicator busy w-2 h-2 bg-yellow-400 rounded-full mr-2"></span>
                                <span class="text-yellow-400 text-sm">执行中</span>
                            </div>
                        </div>
                        <div class="glass-effect rounded-xl p-6 tech-card text-center">
                            <div class="text-2xl font-bold cyber-text mb-2">176</div>
                            <div class="text-gray-400">总设备数</div>
                        </div>
                    </div>

                    <!-- 设备列表 -->
                    <div class="glass-effect rounded-xl p-6 tech-card">
                        <div class="flex justify-between items-center mb-6">
                            <h3 class="text-lg font-bold cyber-text flex items-center">
                                <i class="fas fa-server mr-2"></i>设备列表
                            </h3>
                            <button class="cyber-button px-4 py-2 text-white rounded-lg">
                                <i class="fas fa-plus mr-2"></i>添加设备
                            </button>
                        </div>
                        
                        <div class="overflow-x-auto">
                            <table class="w-full">
                                <thead>
                                    <tr class="border-b border-gray-700">
                                        <th class="text-left py-3 px-4 text-gray-300">设备名称</th>
                                        <th class="text-left py-3 px-4 text-gray-300">类型</th>
                                        <th class="text-left py-3 px-4 text-gray-300">状态</th>
                                        <th class="text-left py-3 px-4 text-gray-300">CPU使用率</th>
                                        <th class="text-left py-3 px-4 text-gray-300">内存使用率</th>
                                        <th class="text-left py-3 px-4 text-gray-300">最后更新</th>
                                        <th class="text-left py-3 px-4 text-gray-300">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="border-b border-gray-700/50 hover:bg-gray-800/30">
                                        <td class="py-3 px-4 text-white">测试服务器-001</td>
                                        <td class="py-3 px-4 text-gray-400">Linux Server</td>
                                        <td class="py-3 px-4">
                                            <span class="flex items-center text-green-400">
                                                <span class="status-indicator online w-2 h-2 bg-green-400 rounded-full mr-2"></span>
                                                在线
                                            </span>
                                        </td>
                                        <td class="py-3 px-4">
                                            <div class="flex items-center space-x-2">
                                                <div class="w-16 h-2 bg-gray-700 rounded-full overflow-hidden">
                                                    <div class="h-full bg-green-400 rounded-full" style="width: 35%"></div>
                                                </div>
                                                <span class="text-gray-400 text-sm">35%</span>
                                            </div>
                                        </td>
                                        <td class="py-3 px-4">
                                            <div class="flex items-center space-x-2">
                                                <div class="w-16 h-2 bg-gray-700 rounded-full overflow-hidden">
                                                    <div class="h-full bg-blue-400 rounded-full" style="width: 68%"></div>
                                                </div>
                                                <span class="text-gray-400 text-sm">68%</span>
                                            </div>
                                        </td>
                                        <td class="py-3 px-4 text-gray-400">2分钟前</td>
                                        <td class="py-3 px-4">
                                            <div class="flex space-x-2">
                                                <button class="text-tech-blue hover:text-tech-purple">
                                                    <i class="fas fa-eye"></i>
                                                </button>
                                                <button class="text-yellow-400 hover:text-yellow-300">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button class="text-red-400 hover:text-red-300">
                                                    <i class="fas fa-power-off"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 创建设备 -->
            <div id="create-device" class="content-section hidden animate-fadeIn">
                <div class="mb-6">
                    <h2 class="text-2xl font-bold cyber-text mb-2">创建设备</h2>
                    <p class="text-gray-400">添加新的测试设备或服务器</p>
                </div>
                
                <div class="glass-effect rounded-xl p-6 tech-card">
                    <form class="space-y-6">
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-300 mb-2">设备名称</label>
                                <input type="text" class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all" placeholder="输入设备名称">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-300 mb-2">设备类型</label>
                                <select class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all">
                                    <option>Linux服务器</option>
                                    <option>Windows服务器</option>
                                    <option>Docker容器</option>
                                    <option>移动设备</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-300 mb-2">IP地址</label>
                                <input type="text" class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all" placeholder="192.168.1.100">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-300 mb-2">端口</label>
                                <input type="number" class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all" placeholder="22">
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-300 mb-2">用户名</label>
                                <input type="text" class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all" placeholder="root">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-300 mb-2">认证方式</label>
                                <select class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all">
                                    <option>SSH密钥</option>
                                    <option>用户名密码</option>
                                </select>
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-300 mb-2">设备描述</label>
                            <textarea rows="3" class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all" placeholder="描述设备用途和配置"></textarea>
                        </div>
                        
                        <div class="flex justify-end space-x-4">
                            <button type="button" class="px-6 py-3 border border-gray-600 text-gray-300 rounded-lg hover:bg-gray-700 transition-colors">
                                取消
                            </button>
                            <button type="submit" class="cyber-button px-6 py-3 text-white rounded-lg hover-glow transition-all duration-200">
                                添加设备
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 设备详情 -->
            <div id="device-details" class="content-section hidden animate-fadeIn">
                <div class="mb-6">
                    <h2 class="text-2xl font-bold cyber-text mb-2">设备详情</h2>
                    <p class="text-gray-400">查看设备的详细信息和运行状态</p>
                </div>
                
                <div class="space-y-6">
                    <!-- 设备基本信息 -->
                    <div class="glass-effect rounded-xl p-6 tech-card">
                        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
                            <i class="fas fa-server mr-2"></i>基本信息
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            <div>
                                <label class="block text-sm text-gray-400 mb-1">设备名称</label>
                                <p class="text-white">测试服务器-001</p>
                            </div>
                            <div>
                                <label class="block text-sm text-gray-400 mb-1">设备类型</label>
                                <p class="text-white">Linux服务器</p>
                            </div>
                            <div>
                                <label class="block text-sm text-gray-400 mb-1">状态</label>
                                <span class="flex items-center text-green-400">
                                    <span class="status-indicator online w-3 h-3 bg-green-400 rounded-full mr-2"></span>
                                    在线
                                </span>
                            </div>
                            <div>
                                <label class="block text-sm text-gray-400 mb-1">IP地址</label>
                                <p class="text-white font-mono">192.168.1.101</p>
                            </div>
                            <div>
                                <label class="block text-sm text-gray-400 mb-1">操作系统</label>
                                <p class="text-white">Ubuntu 20.04 LTS</p>
                            </div>
                            <div>
                                <label class="block text-sm text-gray-400 mb-1">最后连接</label>
                                <p class="text-white">2分钟前</p>
                            </div>
                        </div>
                    </div>

                    <!-- 系统资源监控 -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div class="glass-effect rounded-xl p-6 tech-card">
                            <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
                                <i class="fas fa-microchip mr-2"></i>CPU使用率
                            </h3>
                            <div class="space-y-4">
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-300">当前使用率</span>
                                    <span class="text-tech-blue font-mono">35%</span>
                                </div>
                                <div class="w-full h-4 bg-gray-700 rounded-full overflow-hidden">
                                    <div class="tech-progress h-full" style="width: 35%"></div>
                                </div>
                                <div class="grid grid-cols-2 gap-4 text-sm">
                                    <div>
                                        <span class="text-gray-400">平均负载:</span>
                                        <span class="text-white ml-2">0.85</span>
                                    </div>
                                    <div>
                                        <span class="text-gray-400">核心数:</span>
                                        <span class="text-white ml-2">8</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="glass-effect rounded-xl p-6 tech-card">
                            <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
                                <i class="fas fa-memory mr-2"></i>内存使用率
                            </h3>
                            <div class="space-y-4">
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-300">已使用内存</span>
                                    <span class="text-tech-blue font-mono">68%</span>
                                </div>
                                <div class="w-full h-4 bg-gray-700 rounded-full overflow-hidden">
                                    <div class="tech-progress h-full" style="width: 68%"></div>
                                </div>
                                <div class="grid grid-cols-2 gap-4 text-sm">
                                    <div>
                                        <span class="text-gray-400">已用:</span>
                                        <span class="text-white ml-2">10.9GB</span>
                                    </div>
                                    <div>
                                        <span class="text-gray-400">总量:</span>
                                        <span class="text-white ml-2">16GB</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 运行进程 -->
                    <div class="glass-effect rounded-xl p-6 tech-card">
                        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
                            <i class="fas fa-tasks mr-2"></i>运行中的测试任务
                        </h3>
                        <div class="space-y-3">
                            <div class="flex items-center justify-between p-3 bg-yellow-900/20 rounded-lg border border-yellow-500/30">
                                <div>
                                    <h4 class="text-white font-medium">Web登录流程测试</h4>
                                    <p class="text-gray-400 text-sm">PID: 12345 | 运行时间: 5分钟</p>
                                </div>
                                <span class="text-yellow-400">执行中</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 设备测试 -->
            <div id="device-test" class="content-section hidden animate-fadeIn">
                <div class="mb-6">
                    <h2 class="text-2xl font-bold cyber-text mb-2">设备测试</h2>
                    <p class="text-gray-400">测试设备连接和性能</p>
                </div>
                
                <div class="space-y-6">
                    <!-- 设备选择 -->
                    <div class="glass-effect rounded-xl p-6 tech-card">
                        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
                            <i class="fas fa-cog mr-2"></i>设备测试配置
                        </h3>
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-300 mb-2">选择设备</label>
                                <select class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all">
                                    <option>测试服务器-001</option>
                                    <option>测试服务器-002</option>
                                    <option>Docker集群</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-300 mb-2">测试类型</label>
                                <select class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all">
                                    <option>连接测试</option>
                                    <option>性能测试</option>
                                    <option>压力测试</option>
                                    <option>稳定性测试</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="mt-6 flex justify-center">
                            <button class="cyber-button px-8 py-4 text-white rounded-xl hover-glow transition-all duration-300">
                                <i class="fas fa-play mr-3"></i>开始测试
                            </button>
                        </div>
                    </div>

                    <!-- 测试结果 -->
                    <div class="glass-effect rounded-xl p-6 tech-card">
                        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
                            <i class="fas fa-chart-line mr-2"></i>测试结果
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div class="text-center p-4 bg-green-900/20 rounded-lg border border-green-500/30">
                                <div class="text-2xl font-bold text-green-400 mb-2">✓</div>
                                <div class="text-green-400">连接测试</div>
                                <div class="text-gray-400 text-sm">延迟: 2ms</div>
                            </div>
                            <div class="text-center p-4 bg-green-900/20 rounded-lg border border-green-500/30">
                                <div class="text-2xl font-bold text-green-400 mb-2">✓</div>
                                <div class="text-green-400">性能测试</div>
                                <div class="text-gray-400 text-sm">得分: 8.5/10</div>
                            </div>
                            <div class="text-center p-4 bg-yellow-900/20 rounded-lg border border-yellow-500/30">
                                <div class="text-2xl font-bold text-yellow-400 mb-2">!</div>
                                <div class="text-yellow-400">稳定性测试</div>
                                <div class="text-gray-400 text-sm">需关注</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 设备进程管理 -->
            <div id="device-process" class="content-section hidden animate-fadeIn">
                <div class="mb-6">
                    <h2 class="text-2xl font-bold cyber-text mb-2">设备进程管理</h2>
                    <p class="text-gray-400">监控和管理设备上运行的进程</p>
                </div>
                
                <div class="glass-effect rounded-xl p-6 tech-card">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-lg font-bold cyber-text flex items-center">
                            <i class="fas fa-list mr-2"></i>运行进程列表
                        </h3>
                        <div class="flex space-x-4">
                            <select class="px-4 py-2 bg-gray-800/50 border border-gray-600 rounded-lg text-white">
                                <option>测试服务器-001</option>
                                <option>测试服务器-002</option>
                            </select>
                            <button class="cyber-button px-4 py-2 text-white rounded-lg">
                                <i class="fas fa-sync mr-2"></i>刷新
                            </button>
                        </div>
                    </div>
                    
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead>
                                <tr class="border-b border-gray-700">
                                    <th class="text-left py-3 px-4 text-gray-300">PID</th>
                                    <th class="text-left py-3 px-4 text-gray-300">进程名称</th>
                                    <th class="text-left py-3 px-4 text-gray-300">CPU%</th>
                                    <th class="text-left py-3 px-4 text-gray-300">内存%</th>
                                    <th class="text-left py-3 px-4 text-gray-300">运行时间</th>
                                    <th class="text-left py-3 px-4 text-gray-300">状态</th>
                                    <th class="text-left py-3 px-4 text-gray-300">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="border-b border-gray-700/50 hover:bg-gray-800/30">
                                    <td class="py-3 px-4 text-tech-blue font-mono">12345</td>
                                    <td class="py-3 px-4 text-white">web_test_runner.py</td>
                                    <td class="py-3 px-4 text-yellow-400">25.3%</td>
                                    <td class="py-3 px-4 text-blue-400">12.8%</td>
                                    <td class="py-3 px-4 text-gray-400">05:23</td>
                                    <td class="py-3 px-4">
                                        <span class="text-green-400 flex items-center">
                                            <span class="status-indicator online w-2 h-2 bg-green-400 rounded-full mr-2"></span>
                                            运行中
                                        </span>
                                    </td>
                                    <td class="py-3 px-4">
                                        <div class="flex space-x-2">
                                            <button class="text-yellow-400 hover:text-yellow-300" title="暂停">
                                                <i class="fas fa-pause"></i>
                                            </button>
                                            <button class="text-red-400 hover:text-red-300" title="终止">
                                                <i class="fas fa-stop"></i>
                                            </button>
                                            <button class="text-tech-blue hover:text-tech-purple" title="详情">
                                                <i class="fas fa-info"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="border-b border-gray-700/50 hover:bg-gray-800/30">
                                    <td class="py-3 px-4 text-tech-blue font-mono">12346</td>
                                    <td class="py-3 px-4 text-white">api_performance_test</td>
                                    <td class="py-3 px-4 text-yellow-400">8.1%</td>
                                    <td class="py-3 px-4 text-blue-400">5.2%</td>
                                    <td class="py-3 px-4 text-gray-400">02:45</td>
                                    <td class="py-3 px-4">
                                        <span class="text-green-400 flex items-center">
                                            <span class="status-indicator online w-2 h-2 bg-green-400 rounded-full mr-2"></span>
                                            运行中
                                        </span>
                                    </td>
                                    <td class="py-3 px-4">
                                        <div class="flex space-x-2">
                                            <button class="text-yellow-400 hover:text-yellow-300" title="暂停">
                                                <i class="fas fa-pause"></i>
                                            </button>
                                            <button class="text-red-400 hover:text-red-300" title="终止">
                                                <i class="fas fa-stop"></i>
                                            </button>
                                            <button class="text-tech-blue hover:text-tech-purple" title="详情">
                                                <i class="fas fa-info"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </main>
    </div>

    <!-- 移动端遮罩 -->
    <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-30 lg:hidden hidden"></div>

    <script>
        // 主题切换
        const themeToggle = document.getElementById('theme-toggle');
        const html = document.documentElement;
        
        themeToggle.addEventListener('click', () => {
            html.classList.toggle('dark');
            localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light';
        });

        // 检查本地存储的主题设置
        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            html.classList.add('dark');
        } else {
            html.classList.remove('dark');
        }

        // 侧边栏切换
        const sidebarToggle = document.getElementById('sidebar-toggle');
        const sidebar = document.getElementById('sidebar');
        const sidebarOverlay = document.getElementById('sidebar-overlay');

        sidebarToggle.addEventListener('click', () => {
            sidebar.classList.toggle('-translate-x-full');
            sidebarOverlay.classList.toggle('hidden');
        });

        sidebarOverlay.addEventListener('click', () => {
            sidebar.classList.add('-translate-x-full');
            sidebarOverlay.classList.add('hidden');
        });

        // 导航菜单展开/收起
        document.querySelectorAll('.nav-header').forEach(header => {
            header.addEventListener('click', () => {
                const submenu = header.nextElementSibling;
                const chevron = header.querySelector('.fa-chevron-down');
                
                submenu.classList.toggle('hidden');
                chevron.classList.toggle('rotate-180');
            });
        });

        // 导航项点击处理
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', (e) => {
                e.preventDefault();
                
                // 移除所有active类
                document.querySelectorAll('.nav-item').forEach(nav => nav.classList.remove('active'));
                // 添加active到当前项
                item.classList.add('active');
                
                // 隐藏所有内容区域
                document.querySelectorAll('.content-section').forEach(section => {
                    section.classList.add('hidden');
                });
                
                // 显示对应的内容区域
                const targetId = item.getAttribute('href').substring(1);
                const targetSection = document.getElementById(targetId);
                if (targetSection) {
                    targetSection.classList.remove('hidden');
                }

                // 移动端关闭侧边栏
                if (window.innerWidth < 1024) {
                    sidebar.classList.add('-translate-x-full');
                    sidebarOverlay.classList.add('hidden');
                }
            });
        });

        // 响应式处理
        window.addEventListener('resize', () => {
            if (window.innerWidth >= 1024) {
                sidebar.classList.remove('-translate-x-full');
                sidebarOverlay.classList.add('hidden');
            }
        });

        // 添加页面加载动画
        window.addEventListener('load', () => {
            document.body.classList.add('animate-fadeIn');
        });
    </script>
</body>
</html>
